<template>
  <section class="center-container">
    <nav-aside :modelValue="params"></nav-aside>
    <section class="right-box">
      <bread-crumb></bread-crumb>
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </section>
  </section>
</template>

<script>
import BreadCrumb from "./bread-crumb.vue";
import NavAside from "./nav-aside.vue";

export default {
  components: { NavAside, BreadCrumb },
  props: {
    params: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style scoped>
.center-container {
  display: flex;
  margin-top: 15px;
  margin-bottom: 15px;
}

.right-box {
  flex-grow: 1;
}
</style>

<style>
    .list-video-box {
        display: flex;
        flex-wrap: wrap;
    }

    .list-video-box>.video-list {
        width: 33%;
        padding: 5px;
    }

    .list-video-box>.video-list>video,.list-video-box>.video-list>img {
        width: 100%;
        height: 260px;
    }

    .list-video-box>.video-list>h3 {
        height: 24px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 400;
    }
</style>